<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="../assets/libs/amazeui/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/libs/amazeui/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <script src="../assets/libs/amazeui/js/echarts.min.js"></script>
    <link rel="stylesheet" href="../assets/libs/amazeui/css/amazeui.min.css"/>
    <link rel="stylesheet" href="../assets/libs/amazeui/css/amazeui.tree.min.css"/>
    <link rel="stylesheet" href="../assets/libs/amazeui/css/app.css">
    <link rel="stylesheet" href="../assets/css/core.css">
    <script src="../assets/libs/amazeui/js/jquery.min.js"></script>

</head>

<body data-type="index" page-text="树形组件">
<script src="../assets/libs/amazeui/js/theme.js"></script>
<div class="am-g tpl-g">
    <!-- 内容区域 -->
    <div class="tpl-content-wrapper content-margin-left">
        <div class="row-content am-cf">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title am-fl">树形组件1</div>
                    <div class="widget-function am-fr">
                        <a href="javascript:;" class="am-icon-cog"></a>
                    </div>
                </div>
                <div class="widget-body am-fr">
                    <ul class="am-tree" id="firstTree">
                        <li class="am-tree-branch am-hide" data-template="treebranch">
                            <div class="am-tree-branch-header">
                                <button class="am-tree-branch-name">
                                    <span class="am-tree-icon am-tree-icon-folder"></span>
                                    <span class="am-tree-label"></span>
                                </button>
                            </div>
                            <ul class="am-tree-branch-children"></ul>
                            <div class="am-tree-loader"><span class="am-icon-spin am-icon-spinner"></span></div>
                        </li>
                        <li class="am-tree-item am-hide" data-template="treeitem">
                            <button class="am-tree-item-name">
                                <span class="am-tree-icon am-tree-icon-item"></span>
                                <span class="am-tree-label"></span>
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>


        <div class="row-content am-cf">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title am-fl">树形组件2</div>
                    <div class="widget-function am-fr">
                        <a href="javascript:;" class="am-icon-cog"></a>
                    </div>
                </div>
                <div class="widget-body am-fr">
                    <ul class="am-tree" role="tree" id="myTree">
                        <li class="am-tree-branch am-hide" data-template="treebranch" role="treeitem"
                            aria-expanded="false">
                            <div class="am-tree-branch-header">
                                <button class="am-tree-branch-name">
                                    <span class="am-tree-icon am-tree-icon-folder"></span>
                                    <span class="am-tree-label"></span>
                                </button>
                            </div>
                            <ul class="am-tree-branch-children" role="group"></ul>
                            <div class="am-tree-loader" role="alert">Loading...</div>
                        </li>
                        <li class="am-tree-item am-hide" data-template="treeitem" role="treeitem">
                            <button class="am-tree-item-name">
                                <span class="am-tree-icon am-tree-icon-item"></span>
                                <span class="am-tree-label"></span>
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="row-content am-cf">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title am-fl">树形组件3</div>
                    <div class="widget-function am-fr">
                        <a href="javascript:;" class="am-icon-cog"></a>
                    </div>
                </div>
                <div class="widget-body am-fr">
                    <ul class="am-tree am-tree-folder-select" role="tree" id="myTreeSelectableFolder">
                        <li class="am-tree-branch am-hide" data-template="treebranch" role="treeitem"
                            aria-expanded="false">
                            <div class="am-tree-branch-header">
                                <button class="am-tree-icon am-tree-icon-caret am-icon-caret-right"><span
                                        class="am-sr-only">Open</span></button>
                                <button class="am-tree-branch-name">
                                    <span class="am-tree-icon am-tree-icon-folder"></span>
                                    <span class="am-tree-label"></span>
                                </button>
                            </div>
                            <ul class="am-tree-branch-children" role="group"></ul>
                            <div class="am-tree-loader" role="alert">Loading...</div>
                        </li>
                        <li class="am-tree-item am-hide" data-template="treeitem" role="treeitem">
                            <button class="am-tree-item-name">
                                <span class="am-tree-icon am-tree-icon-item"></span>
                                <span class="am-tree-label"></span>
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script src="../assets/libs/amazeui/js/amazeui.min.js"></script>
<script src="../assets/libs/amazeui/js/amazeui.tree.min.js"></script>
<script src="../assets/js/util/inner.js"></script>
<script>
    $(function () {
        // demo 1
        var data = [
            {
                title: '苹果公司',
                type: 'folder',
                products: [
                    {
                        title: 'iPhone',
                        type: 'item'
                    },
                    {
                        title: 'iMac',
                        type: 'item'
                    },
                    {
                        title: 'MacBook Pro',
                        type: 'item'
                    }
                ]
            },
            {
                title: '微软公司',
                type: 'item'
            },
            {
                title: 'GitHub',
                type: 'item',
                attr: {
                    icon: 'am-icon-github'
                }
            }
        ];

        $('#firstTree').tree({
            dataSource: function (options, callback) {
                // 模拟异步加载
                setTimeout(function () {
                    callback({data: options.products || data});
                }, 400);
            },
            multiSelect: false,
            cacheItems: true,
            folderSelect: false
        });


        // demo 2
        var $myTree = $('#myTree');
        $myTree.tree({
            dataSource: function (options, callback) {
                setTimeout(function () {
                    callback({
                        data: [
                            {
                                title: 'Ascending and Descending',
                                type: 'folder',
                                attr: {
                                    id: 'folder1'
                                }
                            },
                            {
                                title: 'Sky and Water I (with custom icon)',
                                type: 'item',
                                attr: {
                                    id: 'item1',
                                    icon: 'am-icon-file'
                                }
                            },
                            {
                                title: 'Drawing Hands',
                                type: 'folder',
                                attr: {
                                    id: 'folder2'
                                }
                            },
                            {
                                title: 'Waterfall',
                                type: 'item',
                                attr: {
                                    id: 'item2'
                                }
                            },
                            {
                                title: 'Belvedere',
                                type: 'folder',
                                attr: {
                                    id: 'folder3'
                                }
                            },
                            {
                                title: 'Relativity (with custom icon)',
                                type: 'item',
                                attr: {
                                    id: 'item3',
                                    icon: 'am-icon-picture-o'
                                }
                            },
                            {
                                title: 'House of Stairs',
                                type: 'folder',
                                attr: {
                                    id: 'folder4'
                                }
                            },
                            {
                                title: 'Convex and Concave',
                                type: 'item',
                                attr: {
                                    id: 'item4'
                                }
                            }
                        ]
                    });
                }, 400);
            },
            multiSelect: true,
            cacheItems: true,
            folderSelect: false
        }).on('loaded.tree.amui', function (e) {
            console.log('Loaded');
        }).on('selected.tree.amui', function (e, selected) {
            console.log('Select Event: ', selected);
            console.log($myTree.tree('selectedItems'));
        }).on('updated.tree.amui', function (e, selected) {
            console.log('Updated Event: ', selected);
            console.log($myTree.tree('selectedItems'));
        }).on('opened.tree.amui', function (e, info) {
            console.log('Open Event: ', info);
        }).on('closed.tree.amui', function (e, info) {
            console.log('Close Event: ', info);
        });

        // demo 3
        $('#myTreeSelectableFolder').tree({
            dataSource: function (options, callback) {
                setTimeout(function () {
                    callback({
                        data: [
                            {
                                title: 'Ascending and Descending',
                                type: 'folder',
                                attr: {
                                    id: 'F1'
                                }
                            },
                            {
                                title: 'Drawing Hands',
                                type: 'folder',
                                attr: {
                                    id: 'F2'
                                }
                            },
                            {
                                title: 'Belvedere',
                                type: 'folder',
                                attr: {
                                    id: 'F3'
                                }
                            },
                            {
                                title: 'House of Stairs',
                                type: 'folder',
                                attr: {
                                    id: 'F4'
                                }
                            },
                            {
                                title: 'Belvedere',
                                type: 'folder',
                                attr: {
                                    id: 'F5'
                                }
                            }
                        ]
                    });
                }, 400);
            },
            cacheItems: true,
            folderSelect: true,
            multiSelect: true
        });
    })
</script>

</body>

</html>